<template>
    <div class="page">
        <div class="flex-row flex-item">
            <tz-filter :show-net="false" @change="filterChange" :filter-data="filterData">
                <template v-slot:default="scope">
                    <el-input :maxlength="100" size="small" class="table-filter-item" v-model.trim="scope.data.username" clearable placeholder="用户姓名"></el-input>
                    <el-input :maxlength="100" size="small" class="table-filter-item" v-model.trim="scope.data.phone" clearable placeholder="电话号码"></el-input>
                </template>
            </tz-filter>
            <div class="flex1"></div>
            <el-button style="margin-left: 10px;"
                       v-if="$auth['setting_message_white_add']"
                       type="primary"
                       @click="addList"
                       size="small">新增名单</el-button>
        </div>
        <tz-table
                ref="tzTable"
                highlight-current-row
                size="mini"
                :data="loadData">
            <el-table-column
                    prop="username"
                    show-overflow-tooltip
                    label="用户名">
                <template slot-scope="scope">
                    <high-light :value="scope.row.username" :keyword="filterData.username"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="phone"
                    show-overflow-tooltip
                    label="电话号码">
                <template slot-scope="scope">
                    <high-light :value="scope.row.phone" :keyword="filterData.phone"></high-light>
                </template>
            </el-table-column>
            <el-table-column
                    prop="position"
                    show-overflow-tooltip
                    label="职务">
            </el-table-column>
            <el-table-column
                    prop="groupName"
                    show-overflow-tooltip
                    label="单位">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    show-overflow-tooltip
                    label="创建时间"
                    :formatter="(row) => {
                        return moment(row.createTime).format('YYYY-MM-DD HH:mm:ss')
                    }">
            </el-table-column>
            <el-table-column
                    prop="operate"
                    show-overflow-tooltip
                    label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="$auth['setting_message_white_delete']" size="small" type="text" @click="deleteItem(scope.row)">删除</el-button>
                        <el-button v-if="$auth['setting_message_white_edit']" @click="editItem(scope.row)" size="small" type="text">编辑</el-button>
                    </template>
            </el-table-column>
        </tz-table>
        <el-drawer
                title="短信白名单用户"
                :visible.sync="drawer"
                direction="rtl">
            <div class="drawer-content" v-loading="loading">
                <el-form :model="userInfo" ref="userForm" :rules="rules" label-width="80px">
                    <el-form-item label="接收姓名" prop="username">
                        <el-input :maxlength="20" show-word-limit v-model="userInfo.username"></el-input>
                    </el-form-item>
                    <el-form-item label="接收号码" prop="phone">
                        <el-input :maxlength="20" show-word-limit v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="职务" prop="position">
                        <el-input :maxlength="20" show-word-limit v-model="userInfo.position"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="resourceGroupName">
                        <el-select style="width: 100%" v-model="userInfo.groupName"
                                   placeholder="请选择单位">
                            <el-option v-for="item in allGroupsList"
                                       :key="item.groupId"
                                       :label="item.groupName"
                                       :value="item.groupName"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="flex-item flex-row">
                            <div class="flex1"></div>
                            <el-button size="small" @click="drawer = false">取消</el-button>
                            <el-button size="small" type="primary" @click="saveOrUpdateUser">保存</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'messageWhiteList',
  data() {
    return {
      moment,
      filterData: {
        username: '',
        phone: '',
      },
      userInfo: {
        username: '',
        phone: '',
        groupName: '',
      },
      loading: false,
      drawer: false,
      rules: {
        username: [
          { required: true, message: '请输入接收人姓名', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入接收号码', trigger: 'change' },
          { validator: (rule, value, callback) => {
            if (/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
              return callback()
            } else {
              return callback(new Error('手机号码格式不正确'))
            }
          }, trigger: 'blur' }
        ]
      },
      allGroupsList: [],
      isEq: 0
    }
  },
  mounted() {
    this.getGroups()
  },
  methods: {
    refresh() {
      this.$refs.tzTable.refresh(true)
    },
    filterChange(res) {
      this.isEq = res.isEq
      this.refresh()
    },
    loadData(page) {
      const { username, phone } = this.filterData
      const params = {...page, username, phone, isEq: this.isEq}
      return this.$http.get('/alarm/data/getWhitePage', { params }).then(res => {
        return {
          data: res.records || [],
          total: res.total
        }
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取列表失败')
      })
    },
    getGroups() {
      this.$http.get('/sys/user/getGroupList').then(res => {
        this.allGroupsList = res || []
      }).catch(err => {
        this.$TZmessage.error(err.msg || '获取用户组失败')
      })
    },
    deleteItem(row) {
      this.$confirm('是否删除当前白名单').then(() => {
        this.loading = true
        this.$http.delete('/alarm/data/deletedWhite', {
          params: {
            id: row.id
          }
        }).then(() => {
          this.$TZmessage.success('删除成功')
          this.refresh()
        }).catch(err => {
          this.$TZmessage.error(err.msg || '删除失败')
        }).finally(() => {
          this.loading = false
        })
      }).catch(() => {
        console.log('取消执行')
      })
    },
    editItem(item) {
      this.userInfo = {...item}
      this.drawer = true
    },
    addList() {
      this.userInfo = {
        username: '',
        phone: '',
      }
      this.drawer = true
    },
    saveOrUpdateUser() {
      this.$refs.userForm.validate((valid) => {
        if (!valid) {return}
        this.loading = true
        this.$http.post('/alarm/data/addOrUpdateWhite', this.userInfo).then(res => {
          this.refresh()
          this.drawer = false
        }).catch(err => {
          this.$TZmessage.error(err.msg || '增加白名单失败')
        }).finally(() => {
          this.loading = false
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
    .drawer-content {
        padding: 20px;
    }
</style>